<template>
	<view>
		<view  @click="go(item)" v-for="(item,index) in list" :key="index" class="u-padding-20  "
		style="display: flex; border-radius: 10rpx; box-shadow: 0px 2px 8px 0px rgba(197,197,197,0.30);width: 700rpx;background: #fff;margin: 20rpx auto;">
			<view class=" ">
				<u-image :src="item.cover" width='120' height='180' border-radius='10'></u-image>
			</view>
			<view class="u-margin-left-20" style="width: 500rpx;">
			
			
				<view class="u-flex u-row-between">
					<view class="u-font-weight u-font-32 u-line-1">
						{{item.storeName}}
					</view>
					<view class=" u-font-24 ">
					<u-button v-if='isBook' type="primary" size='mini' @click="$Go('/pages/store/book?id='+item.id)">预定</u-button>
					</view>
				</view>
				
				<view class=" u-margin-top-20  u-flex u-row-between">
					<view class="u-line-1 u-type-info" style="width: 450rpx;">{{item.address}}</view>
					<!-- <view class="u-font-22 u-flex u-type-success" @click.stop="openmap(item)">
					 <u-icon  name='map' style='position: relative;top: 3rpx;'></u-icon>
					 <view> {{item.distance}}</view>
					</view> -->
				</view>
			    <view class="u-flex u-row-between">
					<view style="width: 85%;">
						<u-line-progress :percent="(Number(item.canCpNum)/Number(item.cpNum))*100"   height='15'
						:show-percent="false" active-color="linear-gradient(to right,#7139fd,#5498ff)"></u-line-progress>
						<view class="u-flex u-row-between u-font-24">
							<view>空位:{{Number(item.cpNum)-Number(item.canCpNum) }}</view>
							<view>总位:{{item.cpNum}}</view>
						</view>
					</view>
					<view @click.stop="openmap(item)">
						<image src="../../../static/getloaction.png" style="width: 46rpx;height: 46rpx;"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			list:{
				type:Array,
				default:()=>[]
			},
			isBook:{
				type:Boolean,
				default:true
			}
		},
		data(){
			return{
				
			}
		}
		,
		methods:{
			go(e){
				this.$emit('go',e)
			},
			
			openmap(item) {
			
				var lat = item.lat
				var lng = item.lng
				var name = item.storeName
			
				uni.openLocation({
					latitude: Number(lat),
					longitude: Number(lng),
					name: name
			
				})
			}
		}
	}
</script>

<style>
</style>